---
title: Skeleton Placeholder
description: The SkeletonPlaceholder component is a great way to show that content is loading instead of using a circular or linear progress bar.
docType: Demo
docGroup: Components
group: Transition
alias: [Loading, Pending, Placeholder]
hooks: [useSkeletonPlaceholder]
keywords: [feedback]
components: [SkeletonPlaceholder]
---

# Skeleton Placeholder

The `SkeletonPlaceholder` component is a great way to show that content is
loading instead of using a [circular or linear progress bar](/components/progress).

## Simple Example

The `SkeletonPlaceholder` component will default to a height of `1.125em` and
use a random width between `40%` and `85%` of the container.

> !Info! Click the "Reset Demo" button to see the random width behavior in action.

```demo source="./SimpleExample.tsx"

```

### Custom Min and Max Width

The random width can be customized by configuring the `minPercentage` and
`maxPercentage` props.

```demo source="./CustomMinAndMaxWidthExample.tsx"

```

### Static Width

If a random width should not be used, provide a `width` instead.

```demo source="./StaticWidthExample.tsx"

```

### Configuring the Height

The height for the skeleton placeholder can be configured globally by changing
the [$SASSDOC](skeleton-placeholder-height) Sass variable, providing a `height`
prop, or setting the `--rmd-skeleton-placeholder-height` custom property with
[$SASSDOC](transition-set-var) mixin.

```demo source="./ConfiguringTheHeightExample.tsx"

```

## Using the Hook

If the skeleton placeholder animation needs to be applied to a different
element, the `useSkeletonPlaceholder` hook can be used instead.

```demo source="./UsingTheHookExample.tsx"

```

### Replacing Content

```demo source="./ReplacingContentExample.tsx"

```

## Ssr Only

A skeleton layout can be created without any client-side javascript by using the
`skeletonPlaceholder` class name utility function and
`randomSkeletonPlaceholder` function. Since this is a `"server-only"` component,
there will be no rehydration required for the random values.

Try navigating to the
[ssr only example page](/components/skeleton-placeholder/ssr-only) and reloading
a few times to see this code in action.

```demo source="./SsrOnlyExample.tsx" importOnly

```
